<template>
	<view>
		<map class="map" :longitude="lon" :latitude="lat" :markers="markers" scale="15"></map>
		<scroll-view  scroll-y style="height: 950rpx;">
			<view class="container">
				<view class="box1">
					<view class="top1">
						<view class="left-text">
							<view>
								<text class="get-text">取</text>
							</view>
							<view>
								<text class="radius-text">.</text>
							</view>
							<view>
								<text class="radius-text">.</text>
							</view>
							<view>
								<text class="radius-text">.</text>
							</view>
							<view class="receive-style"> 
								<text class="receive-text">收</text>
							</view>
						</view>
						<view  class="container-inner">
							<view v-if="toget==0" class="right-style" @click="tosendcopy">
								<view class="text-style">
									<text class="text-style1">定位地址</text>
									<view class="style3">
										<text class="text-style-red">填写联系人</text>
									</view>
								</view>
								<view class="img-style">
									<image class="img1" src="../../static/z-picture/linkman.png"></image>
								</view>
							</view>
							<view v-if="toget==1" class="right-style" @click="tosendcopy">
								<view class="text-style">
									<text class="text-style1">{{r_siteDetails}}{{r_siteNote}}</text>
									<view class="style3">
										<text class="text-style2">{{r_siteName}}</text>
										<text class="text-style3">{{r_siteTelephone}}</text>
									</view>
								</view>
								<view class="img-style">
									<image class="img1" src="../../static/z-picture/linkman.png"></image>
								</view>
							</view>
							<view v-if="toget==2" class="right-style" @click="tosendcopy">
								<view class="text-style">
									<text class="text-style1">{{addressDataCopy.siteDetails}}{{addressDataCopy.siteNote}}</text>
									<view class="style3">
										<text class="text-style2">{{addressDataCopy.siteName}}</text>
										<text class="text-style3">{{addressDataCopy.siteTelephone}}</text>
									</view>
								</view>
								<view class="img-style">
									<image class="img1" src="../../static/z-picture/linkman.png"></image>
								</view>
							</view>
							<view v-if="addressData==''" class="right-style" @click="tosend">
								<view class="text-style">
									<text class="text-style1">{{g_siteDetails}}{{g_siteNote}}</text>
									<view class="style3">
										<text class="text-style2">{{g_siteName}}</text>
										<text class="text-style3">{{g_siteTelephone}}</text>
									</view>
								</view>
								<view class="img-style">
									<image class="img1" src="../../static/z-picture/linkman.png"></image>
								</view>
							</view>
							<view v-if="addressData!=''" class="right-style" @click="tosend">
								<view class="text-style">
									<text class="text-style1">{{addressData.siteDetails}}{{addressData.siteNote}}</text>
									<view class="style3">
										<text class="text-style2">{{addressData.siteName}}</text>
										<text class="text-style3">{{addressData.siteTelephone}}</text>
									</view>
								</view>
								<view class="img-style">
									<image class="img1" src="../../static/z-picture/linkman.png"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="buttom1" @click="showMask">
						<view class="left-text1">
							<text class="left-text11">取件时间</text>
						</view>
						<view class="left-text2">
							<text class="left-text22">可预约</text>
						</view>	
						<view v-if="!ischoose" class="left-text3" >
							<text class="left-text33">立即取件</text>
						</view>
						<view v-if="ischoose" class="left-text3" >
							<text class="left-text33">{{userChooseTime}}</text>
						</view>
						<view class="left-img">
							<image class="left-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
						<!-- 时间插件 -->
						<hTimeAlert
							title="预约时间" 
							rangeStartTime="00:00:00"
							rangeEndTime="24:00:00"
							intervalTime="30"
							dayStartIntTime="60"
							rangeDay="3"
							defaultTime='2020-02-02 02:02:22'
							disabled="" 
							:isNow="isNow"
							:isRoundingTime="isRoundingTime"
							:isShow="isShow" 
							:maskHide="maskHide"
							:rangeType="rangeType"
							:closeBtn="closeBtn"
							@closeAlert="handelClose">
						</hTimeAlert>
					</view>
				</view>
				<view class="box2">
					<view v-if="!isShowGoodMSG" class="box2-inner" @click="opengoodmsg">
						<view class="box-l1">
							<text class="box-text1">物品信息</text>
						</view>
						<view class="box-r1">
							<text class="box-text2">物品类型、价值、重量</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>	
					<view v-if="isShowGoodMSG" class="box2-inner" @click="opengoodmsg">
						<view class="box-l1">
							<text class="box-text1">物品信息</text>
						</view>
						<view class="box-r1">
							<text class="box-text3-return">{{goodType}}、{{goodPrice}}、{{goodWeightString}}</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>	
					<view v-if="remark==''" class="box2-inner"  @click="toremark">
						<view class="box-l2">
							<text class="box-text3">备注</text>
						</view>
						<view class="box-r2">
							<text class="box-text4">物品描述、送件要求等</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>
					<view v-if="remark!=''" class="box2-inner"  @click="toremark">
						<view class="box-l2">
							<text class="box-text3">备注</text>
						</view>
						<view class="box-r2">
							<text class="box-text3-return">{{remark}}</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>
						
				</view>
				<view class="box3">
					<view class="box2-inner">
						<view class="box-l1">
							<text class="box-text1">物品保价</text>
						</view>
						<view class="box-r1">
							<text class="box-text2">未保价物品最高赔付5倍跑腿费</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>	
					<view class="box2-inner">
						<view class="box-l1">
							<text class="box-text1">红包</text>
						</view>
						<view class="box-r1">
							<text class="box-text2">暂无可用红包</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>
					<view class="box2-inner">
						<view class="box-l2">
							<text class="box-text3">小费</text>
						</view>
						<view class="box-r2">
							<text class="box-text4">加小费抢单更快哦</text>
						</view>
						<view class="box-img">
							<image class="box-img1" src="../../static/z-picture/arrow.png"></image>
						</view>
					</view>	
				</view>
			</view>
		</scroll-view>
		<view class="fixedOrder"> <!-- 底部提交订单页面-->
			<view class="left-style">
				<view class="left-style1">
					<text class="text1">跑腿费</text>
					<view v-if="k_Num==''" class="left-style2" >
						1公里内
					</view>	
					<view v-if="k_Num!=''" class="left-style2" >
						{{k_Num}}
					</view>	
				</view>
			</view>
			<view v-if="sendprice==''" class="left2-style">
				<text class="left2-style-text">￥7</text>
			</view>
			<view v-if="sendprice!=''" class="left2-style">
				<text class="left2-style-text">￥{{sendprice}}</text>
				<view v-if="goodWeight!=4" class="left2-style-text2">{{goodWeightString}}</view>
			</view>
			
			<view class="middle-style" @click="opendetail">
				<text class="text5">明细</text>
				<image class="img2" src="../../static/z-picture/arraytop.png"></image>
			</view>
			<view><!-- 配送费明细弹出层 -->
				<minpopup :show="show_detail" @close="closedetail">
					<view class="detail-top">
						<text>费用明细</text>
					</view>
					<view class="detail-middle">
						<view class="left-detail-middle">
							<text>基础配送费</text>
						</view>
						<view class="right-detail-middle">
							<txet>￥{{basicSendPrice}}</txet>
						</view>
					</view>
					<view v-if="distance!=''" class="detail-middle">
						<view class="left-detail-middle">
							<text>距离附加费</text>
							<text class="left-detail-middle-text">{{distance}}米</text>
						</view>
						<view class="right-detail-middle">
							<txet>￥{{distancePrice}}</txet>
						</view>
					</view>
					<view v-if="weightPrice!=0" class="detail-middle">
						<view class="left-detail-middle">
							<text>重量附加费</text>
							<text class="left-detail-middle-text">{{goodWeightString}}</text>
						</view>
						<view class="right-detail-middle">
							<txet>￥{{weightPrice}}</txet>
						</view>
					</view>
				</minpopup>
			</view>
			<view class="right-style" @click="toCreatedOrder">
				<view class="right1-style">
					<text class="text7">提交订单</text>
				</view>
			</view>
		</view>
		<view><!-- 物品信息弹出层 -->
			<minpopup :show="show_pop" @close="closegooodmsg">
				<view class="left-margin-style">
					<view class="pop-title">
						<text class="pop-title-text">物品信息</text>
					</view>
					<view>
						<text>物品类型</text>
					</view>
					<view ><!-- 循环插件 物品类型-->
						<uni-grid :square="false" :column="3" :showBorder="false">
							<uni-grid-item><uni-tag text="餐饮" :type="typeIndex == 1 ? 'error' : 'default'" :circle="true"  @click="tobindid(1)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="文件" :type="typeIndex == 2 ? 'error' : 'default'" :circle="true"  @click="tobindid(2)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="生鲜" :type="typeIndex == 3 ? 'error' : 'default'" :circle="true"  @click="tobindid(3)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="蛋糕" :type="typeIndex == 4 ? 'error' : 'default'" :circle="true"  @click="tobindid(4)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="鲜花" :type="typeIndex == 5 ? 'error' : 'default'" :circle="true"  @click="tobindid(5)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="钥匙" :type="typeIndex == 6 ? 'error' : 'default'" :circle="true"  @click="tobindid(6)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="数码" :type="typeIndex == 7 ? 'error' : 'default'" :circle="true"  @click="tobindid(7)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="服饰" :type="typeIndex == 8 ? 'error' : 'default'" :circle="true"  @click="tobindid(8)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="其他" :type="typeIndex == 9 ? 'error' : 'default'" :circle="true"  @click="tobindid(9)"></uni-tag></uni-grid-item>
						</uni-grid>
					</view>
					<view class="tips">
						<text>温馨提示：请勿配送违禁品及3000元以上物品</text>
					</view>
					<view>
						<text>物品价值</text>
					</view>
					<view ><!-- 循环插件 物品类型-->
						<uni-grid :square="false" :column="3" :showBorder="false">
							<uni-grid-item><uni-tag text="50元以下" :type="typeIndex1 == 1 ? 'error' : 'default'" :circle="true"  @click="tobindid1(1)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="50-150元" :type="typeIndex1 == 2 ? 'error' : 'default'" :circle="true"  @click="tobindid1(2)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="150-300元" :type="typeIndex1 == 3 ? 'error' : 'default'" :circle="true"  @click="tobindid1(3)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="300-1000元" :type="typeIndex1 == 4 ? 'error' : 'default'" :circle="true"  @click="tobindid1(4)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="1000-1500元" :type="typeIndex1 == 5 ? 'error' : 'default'" :circle="true"  @click="tobindid1(5)"></uni-tag></uni-grid-item>
							<uni-grid-item><uni-tag text="1500元以上" :type="typeIndex1 == 6 ? 'error' : 'default'" :circle="true"  @click="tobindid1(6)"></uni-tag></uni-grid-item>
						</uni-grid>
					</view>
					<view>
						<text>物品重量</text>
					</view>
					<view v-if="goodWeight==4" class="goodweight-text">小于5公斤</view>
					<view v-if="goodWeight!=4" class="goodweight-text">{{goodWeight}}公斤</view>
					<view class="bing-progress">
						<bing-progress class="bp" :showInfo="false" strokeWidth="3px" handleHeight="30px" handleWidth="30px" handleBorderRadius="15px"
						 :max="20" :min="4" :value="value" :subValue="subValue" @change="changeweight"></bing-progress>
					</view>
					<view class="goodweight-buttom">
						<text class="left-goodweight-text">小于5公斤</text>
						<button class="confirm-button" @click="toclosepop">确定</button>
						<text class="right-goodweight-text">20公斤</text>
					</view>
				</view>
			</minpopup>
		</view>
	</view>	
</template>

<script>
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";
	import minpopup from "@/components/min-popup/min-popup.vue";
	import bingprogress from "../../components/bing-progress/bing-progress.vue";
	import {mydateformatSub} from "../../unitl/api.js";
	export default {
			components:{hTimeAlert,minpopup,bingprogress},
		data() {
			return {
				ischoose:false,
				remark:'',/* 接收备注页面传回来的备注 */
				value: 0,  /* 这里是滑动条参数*/
				subValue: 20,/* 这里是滑动条参数*/
				typeIndex1:0, /* 弹出层选中后的参数值*/
				typeIndex:0,	/* 弹出层选中后的参数值*/
				goodType:'',	/* 获取弹层出用户选择的参数 */
				goodPrice:'',
				goodWeightString:'小于5公斤',/* 两个状态 方便取值，一个是num,一个是String */
				goodWeight:4,
				isShowGoodMSG:false,
				show_pop:false,/* minpopup插件的属性 */
				show_detail:false,/* 明细弹出是否 */
				isShow: false,		/* 预约时间插件 */
				isNow:true,
				isRoundingTime:true,
				maskHide: false,
				closeBtn: true,
				rangeType: false,
				toget:0,  /* 判断前一页面地址是否有值，用户是否选择地址 0表示前一页面取货信息没值,展示默认信息,1表示有值传过来, 2表示这页选择的地址获取的值*/
				r_siteDetails : '', /* 前一页面传过来的取货信息*/
				 r_siteNote :'',
				 r_siteName :'',
				 r_siteTelephone :'' ,
				 r_lon : '',
				 r_lat : '',
				 g_siteDetails : '',/* 前一页面传过来的收货信息 */
				 g_siteNote :'' ,
				 g_siteName :'' ,
				 g_siteTelephone : '',
				 longitude : '',  /* 前一页面收货地址的经纬度，为了保持一致*/
				latitude : '',
				g_aid:0,   //收货地址id
				r_aid:0,	//取货地址id
			lon:'104.063491', /* 当前定位*/
			lat:'30.572932',
			markers:[
				{
					longitude:'104.063491',
					latitude:'30.572932',
					iconPath:'../../static/z-picture/qizhi.png',
					width:50,
					height:50
				}
			],
			addressData:[],			/* 用户选择地址后将值存储的数组 */
			addressDataCopy:[],
			distance:'',  /* 骑行距离 m 这里指的是用户选择的地址之间的距离*/ 
			duration:'', /* 骑行时间 s 同上*/	
			basicSendPrice:6,/* 基础配送费， */
			distancePrice:0,/* 距离附加费 */
			weightPrice:0,/*  重量附加*/
			specialTimePrice:'',/* 特殊时段0-7 +2  22-24  +1 */
			difficultPrice:'',/*,  雨雪天气，困难路段*/
			sendTime:'',     /* 预计送达时间，设定为骑手在用户下单的取货地址
			半径5公里内能接收到订单。5公里设置为25min 
			加上地图预估的时间 再加上取货时间10min，
			到达地址后送到客户手上10min 总计花费时间为地图预估时间+45min*/
			sendprice:'',/* 总计配送费，如有保价费也要包括进去*/
			k_Num:'',//配送明细里面显示多少公里
			estimateTime:'',//预估送达时间
			userChooseTime:'',//用户选择的取货时间
		}	
	},
	methods:{
		tosend(){
			uni.navigateTo({
				url:"../address/address"
			})
		},
		tosendcopy(){
			uni.navigateTo({
				url:"../address/addresscopy"
			})
		},
		//开启时间弹窗
		showMask(){
			this.isShow=true
		},
		//关闭
		handelClose(data) {
		    this.isShow = false;
			if(data._date=='' || data._date==null){
				
			}else{
				this.userChooseTime=data._date;
				this.ischoose=true;
			}
			
		},
		//物品信息弹窗关闭
		opengoodmsg(){
			 this.show_pop = true
		},
		//物品信息弹窗关闭
		closegooodmsg(){
		    this.show_pop = false
		},
		//弹出层选中物品类型后将id传值给typeIndex
		tobindid(id){
			this.typeIndex=id
			if(id==1) this.goodType='餐饮'
			if(id==2) this.goodType='文件'
			if(id==3) this.goodType='生鲜'
			if(id==4) this.goodType='蛋糕'
			if(id==5) this.goodType='鲜花'
			if(id==6) this.goodType='钥匙'
			if(id==7) this.goodType='数码'
			if(id==8) this.goodType='服饰'
			if(id==9) this.goodType='其他'
			
		},
		tobindid1(id){
			this.typeIndex1=id
			if(id==1) this.goodPrice='50元以下'
			if(id==2) this.goodPrice='50-150元'
			if(id==3) this.goodPrice='150-300元'
			if(id==4) this.goodPrice='300-1000元'
			if(id==5) this.goodPrice='1000-1500元'
			if(id==6) this.goodPrice='1500元以上'
		},
		//选择进度条传值
		changeweight(e){
			this.goodWeight=e.value
			if(e.value==4){
				this.goodWeightString='小于'+(e.value+1)+'公斤'
			}else{
				this.goodWeightString=e.value+'公斤'
			}
		},
		//关闭物品信息弹出层，需要确认物品类型和物品价值都被选中
		toclosepop(){
			if(this.goodType=='') {
				uni.showToast({
					title:'请选择物品类型',
					duration:1000
				})
			}else if(this.goodPrice==''){
				uni.showToast({
					title:'请选择物品价值',
					duration:1000
				})
			}else{//关闭弹出层
				this.show_pop=false
				//用户选择弹出层的信息后在界面展示
				this.isShowGoodMSG=true;
				this.toGetMap();
			}
			
		},
		//去备注页面
		toremark(){
			uni.navigateTo({
				url:'./sendremark'
			})
		},
		//开启明细
		opendetail(){
			this.show_detail=true
		},
		//关闭配送明细
		closedetail(){
			this.show_detail=false
		},
		//调用高德接口，计算出距离
		toGetMap(){
			if(this.latitude!='' && this.r_lat!=''){
				uni.request({
				url:"https://restapi.amap.com/v4/direction/bicycling?origin="+this.r_lon+","+this.r_lat+"&destination="+this.longitude+","+this.latitude+"&key=1f5cfb770d01a1a0d8289169188de6b3",
				success: res =>{
					this.distance=res.data.data.paths[0].distance
					this.duration=res.data.data.paths[0].duration
					//得到距离和骑行时间传给后台
					uni.request({
						url:this.baseurl+"/lable/getSendPrice?distance="+this.distance+"&duration="+this.duration+"&goodWeight="+this.goodWeight,
						success: res1 =>{
							this.sendprice=res1.data.price;
							this.k_Num=res1.data.k_Num;
							this.sendTime=res1.data.sendTime;
							this.estimateTime=res1.data.estimateTime_time;
							this.basicSendPrice=res1.data.basicSendPrice;
							this.distancePrice=res1.data.distancePrice;
							this.specialTimePrice=res1.data.specialTimePrice;
							this.weightPrice=res1.data.weightPrice;
							this.difficultPrice=res1.data.difficultPrice;
						}
					})
					}
				})
			}
		},
		toCreatedOrder(){
			var time=mydateformatSub(new Date());
			uni.request({
				url:this.baseurl+'/helpsend/addorder',
				method:'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data:{
					serviceprice:this.sendprice,
					estimatetime:this.estimateTime,
					remark:this.remark,
					customerid:this.$store.state.userInfo.id,
					relatedadressId:this.r_aid,
					getadressId:this.g_aid,
					sendGoodType:this.goodType,
					sendGoodValue:this.goodPrice,
					sendGoodWeight:this.goodWeightString,
					totalPrice:this.sendprice,
					basicPrice:this.basicSendPrice,
					distancePrice:this.distancePrice,
					weightPrice:this.weightPrice,
					specialTimePrice:this.specialTimePrice,
					difficultPrice:this.difficultPrice,
					pickuptime:this.userChooseTime==''? time:this.userChooseTime
				},
				//成功后回调的函数
				success: res => {
					if(res.data.code==200){	//方法执行成功后跳转到支付页面
						uni.navigateTo({
							url:'../money/pay'
						})
					}else if(res.data.code==500){
						uni.showToast({
							title:'提交订单失败，请重试！',
							duration:1000
						})
					}
				}
			})
		}
	},
	onLoad(options) {
		//前一页面传过来的值并赋值给当前页面
		this.r_siteDetails =options.r_siteDetails,
		 this.r_siteNote =options.r_siteNote,
		 this.r_siteName =options.r_siteName,
		 this.r_siteTelephone =options.r_siteTelephone ,
		 this.r_lon =options.r_lon,
		 this.r_lat = options.r_lat,
		 this.g_siteDetails = options.g_siteDetails,
		 this.g_siteNote =options.g_siteNote ,
		 this.g_siteName =options.g_siteName ,
		 this.g_siteTelephone = options.g_siteTelephone,
		 this.longitude = options.g_lon,
		this.latitude = options.g_lat,
		this.g_aid=options.g_aid,
		this.r_aid=options.r_aid,
		this.toget = options.toget
	},
	onShow(){
		//调用高德接口，计算出距离
		this.toGetMap();
		
	}
}
</script>

<style lang="scss">
.map{
	width: 750rpx;
	height: 350rpx;
}
.container{
	background-color: #F4F4F4;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.box2{
		height: 280rpx;
		background-color: #FEFEFE;
		margin: 15rpx 20rpx;
		border-radius: 15rpx;
		.box2-inner{
			height: 130rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 10rpx;
			
			.box-l1{
				border-bottom: 1px #F0F0F0 solid;
				width: 175rpx;
				margin: 30rpx 0 0 30rpx;
				.box-text1{
					font-size: 35rpx;
				}
			}
			.box-r1{
				border-bottom: 1px #F0F0F0 solid;
				width: 500rpx;
				margin-top: 30rpx;
				.box-text2{
					float: right;
					margin-top: 10rpx;
					margin-right: 18rpx;
					font-size: 33rpx;
					color: #D3D3D3;
				}
				.box-text3-return{
					float: right;
					margin-top: 10rpx;
					margin-right: 18rpx;
					font-size: 33rpx;
				}
			}
			.box-l2{
				width: 175rpx;
				margin: 30rpx 0 0 30rpx;
				.box-text3{
					font-size: 35rpx;
				}
			}
			.box-r2{
				width: 500rpx;
				margin-top: 30rpx;
				.box-text4{
					float: right;
					margin-top: 10rpx;
					margin-right: 18rpx;
					font-size: 33rpx;
					color: #D3D3D3;
				}
				.box-text3-return{
					float: right;
					margin-top: 10rpx;
					margin-right: 18rpx;
					font-size: 33rpx;
				}
			}
			.box-img{
				width: 75rpx;
				margin-top: 38rpx;
				margin-right: 10rpx;
				.box-img1{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}	
	}
	.box3{
		height: 400rpx;
		background-color: #FEFEFE;
		margin: 15rpx 20rpx 30rpx 20rpx;
		border-radius: 15rpx;
		.box2-inner{
			height: 130rpx;
			display: flex;
			flex-direction: row;
			margin-bottom: 10rpx;
			
			.box-l1{
				border-bottom: 1px #F0F0F0 solid;
				width: 175rpx;
				margin: 30rpx 0 0 30rpx;
				.box-text1{
					font-size: 35rpx;
				}
			}
			.box-r1{
				border-bottom: 1px #F0F0F0 solid;
				width: 500rpx;
				margin-top: 30rpx;
				.box-text2{
					float: right;
					margin-top: 10rpx;
					margin-right: 18rpx;
					font-size: 33rpx;
					color: #D3D3D3;
				}
			}
			.box-l2{
				width: 175rpx;
				margin: 30rpx 0 0 30rpx;
				.box-text3{
					font-size: 35rpx;
				}
			}
			.box-r2{
				width: 500rpx;
				margin-top: 30rpx;
				.box-text4{
					float: right;
					margin-top: 10rpx;
					margin-right: 18rpx;
					font-size: 33rpx;
					color: #D3D3D3;
				}
			}
			.box-img{
				width: 75rpx;
				margin-top: 38rpx;
				margin-right: 10rpx;
				.box-img1{
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.box1{
		margin: 0rpx 20rpx 15rpx 20rpx;
		border-radius: 15rpx;
		background-color: #FEFEFE;
		.top1{
			display: flex;
			flex-direction:row;
			background-color: #ffffff;
			
		}
		.left-text {
			margin-top: 20rpx;
			width: 70rpx;
			margin-left: 30rpx;
			}
		.get-text{
			text-align: center;
			line-height: 70rpx;
			font-size: 36rpx;
			background-color: #000000;
			color: #FFFFFF;
			border-radius: 50%;
			border-width:1rpx ;
			padding: 10rpx;
		}
		.receive-text{
			text-align: center;
			line-height: 70rpx;
			font-size: 36rpx;
			background-color: #ff0000;
			color: #FFFFFF;
			border-radius: 50%;
			border-width:1rpx ;
			padding: 10rpx;
		}
		.radius-text{
			font-size: 25rpx;
			color: #000000;
			font-weight: bold;
			margin-left:25rpx;
		}
		.right-style{
			height: 180rpx;
			display: flex;
			flex-direction: row;
			margin-top: 30rpx;
			margin-left: 30rpx;
			width: 550rpx;
			border-bottom: #F0F0F0 1px solid
		}
		.text-style{
			width: 480rpx;
			margin-top: 15rpx;
		}
		.text-style1{
			margin-top: 10rpx;
			font-size: 40rpx;
			font-weight: bold;
		}
		.text-style-red{
			color: #D3D3D3;
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #ff0000;
		}
		
		.text-style2{
			color: #D3D3D3;
			margin-top: 20rpx;
			font-size: 30rpx;
		}
		.text-style3{
			margin-left: 20rpx;
			color: #D3D3D3;
			margin-top: 20rpx;
			font-size: 30rpx;
		}
		.img-style{
			margin-top: 40rpx;
			margin-left: 20rpx;
		}
		.img1{
			width: 50rpx;
			height: 50rpx;
		}
		.container-inner{
			display: flex;
			flex-direction: column;
		}
		.towhere-style{
			margin-top: 50rpx;
			color: #D3D3D3;
			font-size: 40rpx;
		}
		.default-text{
			display: flex;
			flex-direction: row;
		}
		.default-text{
			text-align: center;
		}
		.mini-text{
				margin-top: 30rpx;
				font-size: 30rpx;
				color: #AFAFAF;
				}
		.mini1-text{
			margin-left: 30rpx;
			margin-top: 30rpx;
			font-size: 30rpx;
			color: #AFAFAF;
		}
		.buttom1{
			display: flex;
			flex-direction:row;
			background-color: #ffffff;
			height: 100rpx;
		}
		.left-text1{
			margin-top: 20rpx;
			.left-text11{
				font-size: 35rpx;
				margin-left: 30rpx;
			}
			}
		.left-text2{
			margin-top: 15rpx;
			margin-left: 15rpx;
				.left-text22{
					font-size: 24rpx;
					padding: 8rpx;
					background-color: #ffaa00;
					color: #62480D;
					border-radius: 14rpx;
				}
			}
		.left-text3{
			width: 360rpx;
			margin-top: 18rpx;
			text-align: right;
			.left-text33{
				font-size: 32rpx;
				margin-left: 30rpx;
			}
			}
		.left-img{
			margin-top: 25rpx;
			margin-left: 20rpx;
			.left-img1{
				width: 40rpx;
				height: 40rpx;
			}
			}
		.receive-style{
			margin-top: 20rpx;
		}
	}
}
.fixedOrder{
	position: fixed;
	display: flex;
	flex-direction: row;
	.left-style{
		width: 120rpx;
		margin-left: 35rpx;
		.left-style1{
			margin-top: 10rpx;
			text-align: center;
			.text1{
				font-size: 36rpx;
				font-weight: bold;
			}
			.left-style2{
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
		}
	}
	.left2-style{
		flex-direction: column;
		margin-top: 10rpx;
		width:180rpx ;
		.left2-style-text{
			font-size: 36rpx;
			font-weight:bold;
			color: #F3524E;
		}
		.left2-style-text2{
			font-size: 26rpx;
		}
		
	}
	.middle-style{
		width: 200rpx;
		margin-top: 10rpx;
		.text5{
			font-size: 28rpx;
		}
		.img2{
			margin-top: 20rpx;
			margin-left: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}
	.right-style{
		width: 250rpx;
		background-color: #FFDE17;
		font-size: 42rpx;
		font-weight: bold;
		.right1-style{
			margin-top: 20rpx;
			.text7{
				margin-left: 20rpx;
			}
		}
	}
}
.left-margin-style{
	margin-left: 30rpx;
	margin-right: 30rpx;
	.pop-title{
		border-bottom: 1px #F0F0F0 solid;
		.pop-title-text{
			margin-left: 275rpx;
			font-size: 40rpx;
		}
	}
	.tips{
		font-size: 20rpx;
	}
}
.bp {
		margin: 5px 10px;
	} 
.bing-progress{
	touch-action: none;//当你触摸并按住触摸目标时候，禁止系统默认菜单
}
.goodweight-text{
	font-size: 46rpx;
	font-weight: bold;
	color: #FBC445;
	text-align: center;
}
.goodweight-buttom{
	display: flex;
	flex-direction: row;
	.left-goodweight-text{
		width:200px ;
		margin-left:20rpx;
		font-size: 24rpx;
		color:#C2C2C2 ;
	}
	.confirm-button{
		width: 350rpx;
		background-color: #ffff00;
		font-weight: bold;
	}
	.right-goodweight-text{
		margin-left: 100rpx;
		width:100px ;
		font-size: 24rpx;
		color:#C2C2C2 ;
	}
}
.detail-top{
	margin-top: 20rpx;
	text-align: center;
	height: 80rpx;
	border-bottom: 1px #F0F0F0 solid;
	.text{
		font-size: 36rpx;
		font-weight: bold;
	}
}
.detail-middle{
	margin:30rpx 80rpx 30rpx 50rpx;
	display: flex;
	flex-direction: row;
	.left-detail-middle{
		width: 500rpx;
		.left-detail-middle-text{
			margin-left: 30rpx;
			font-size: 28rpx;
			color:#aaaaaa;
		}
	}
	.right-detail-middle{
		text-align: right;
		width: 120rpx;
	}
}
</style>
